{% extends 'layout/basic.html' %}
{% load static %}
{% block title %} 用户注册{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
    <style>
        .err-msg {
            color: red;
            position: absolute;
        }

        #form-error {
            color: red;
            position: absolute;

        }
    </style>
{% endblock %}


{% block content %}
        <div class="account">
            <div class="title">用户注册</div>
            <form method="post" novalidate id="form-reg">
                {% csrf_token %}
                {% for field in form %}
                    {% if field.name == 'code' %}
                        <div class="form-group">
                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                            <div class="clearfix">
                                <div class="col-xs-7" style="padding-left: 0">{{ field }} <span class="err-msg"></span>
                                     <span id="form-error">{{ field.errors.0 }}</span>
                                </div>
                                <div class="col-xs-5" style="padding-right: 0"><input type="button"
                                                                                      class="btn btn-default"
                                                                                      id="btnSms" value="点此获取验证码"></div>
                            </div>
                        </div>
                    {% else %}
                        <div class="form-group">
                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                            {{ field }} <span class="err-msg"></span>
{#                            <span id="form-error">{{ field.errors.0 }}</span> {# 展示form的错误信息 #}
{#                            {% if field.name == 're_password' %}#}
{#                                <span id="form-error">{{ errors.0 }}</span> {# 展示全局钩子的错误信息 #}
{#                            {% endif %}#}
{#                            <span class="err-msg"></span>#}
                        </div>
                    {% endif %}
                {% endfor %}
               {#  通过 form表单 发送注册信息 #}
            {# <button type="submit" class="btn btn-primary" id="btnReg">注册</button>#}
                {#  通过ajax 请求发送 #}
             <button type="button" class="btn btn-primary" id="btnReg">注册</button>
            </form>
        </div>
{% endblock %}


{% block js %}
    <script>
        // 页面加载自动执行
        $(function () {
            bindClickSms(); // 发送短信 验证码
            bindBtnReg(); // 注册信息 发送给后端
        })

        function bindClickSms() {
            $('.err-msg').text(''); // 初始化错误信息
            $('#btnSms').click(function () {
                // ajax
                $.ajax({
                    url: '{% url 'send_sms' %}',
                    type: 'get',
                    data: {
                        'mobile_phone': $('#id_mobile_phone').val(),
                        'type': 'register',
                    },
                    success: function (data) {
                        if (data.status) {
                            console.log('发送成功,设置时间频率60秒后才能点击');
                            sendSmsRemind();
                        } else {
                            // 获取错误信息
                            $.each(data.error, function (key, value) {
                                // key error 字典里的key 即字段名
                                $('#id_' + key).next().text(value[0])
                                setTimeout(function () {
                                    $('.err-msg').text('');
                                }, 1000)
                            })
                        }
                    }
                })
            })

        }

        // 倒计时
        function sendSmsRemind() {
            var $smsBtn = $('#btnSms')
            $smsBtn.prop('disabled', true) // 禁用发送短信按钮
            var time = 60
            // 当已发送短信时，按钮的文字说换成时间提示
            var remind = setInterval(function () {
                $smsBtn.val(time + '秒后获取验证码')
                time = time - 1
                // 判断时间过了60秒则清除锁定
                if (time < 1) {
                    clearInterval(remind); // 清除计时
                    $smsBtn.val('点此获取验证码').prop('disable', false)
                }
            }, 1000)

        }

        // 通过 ajax 请求 发送注册信息
    function bindBtnReg() {
        $('#btnReg').click(function () {
            $('.err-msg').empty(); // 初始化错误信息
            let regData = $('#form-reg').serialize() // 获取form表单下所有的数据信息 + csrf token
            $.ajax({
                url: '{% url 'register' %}',
                type: 'post',
                data: regData,
                success:function (data) {
                    if (data.status){
                        // 验证成功，跳转登陆界面
                        location.href = data.url
                    }else {
                        // 验证失败，前面输入框显示错误信息的
                         $.each(data.error, function (key, value) {
                                // key error 字典里的key 即字段名
                                $('#id_' + key).next().text(value[0])
                               setTimeout(function () {
                                    $('.err-msg').text('');
                                }, 2000)
                            })
                    }
                }
            })
        })
    }
    </script>
{% endblock %}